<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        Vue中常用的按键别名[@keyup.按键别名]、[@keydown.tab]
            1、回车 => enter
            2、删除 => delete(捕获"删除"和"退格"键)
            3、退出 => esc
            4、空格 => space
            5、换行 => tab(特殊，必须配合keydown去使用)
            6、上=>up 下=>down 左=>left  右=>right
        2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但主语要转为kebab-case (短横线命名)
        3、系统修饰键(用法特殊)：ctrl、alt、shift、meta
            (1). 配合keyup使用：按下修饰键的同事，再按下其他键，随后释放其他键，事件才被触发
            (2). 配合keydown使用：正常触发事件
        4、也可以使用keyCode去制定具体的按键(不推荐)
        5、Vue.config.keyCode 自定义键名(Enter) = 键码(13)，可以去定制按键别名
     -->
    <div class="app">
        <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>
    <script type="text/javascript">

        const vm = new Vue({
            data() {
                return {
                    name: '测试',
                    addr: '上海市'
                }
            },
            methods: {
                showInfo(e) {
                    console.log("@你好", e.target.value)
                }
            },
        })
        vm.$mount('.app')
    </script>
</body>

</html>